<template>
  <view class="index-index-page">
    <view :style="viewHeightStyle">
      <u-tabs-swiper ref="uTabs" class="st-absolute" bg-color="transparent" active-color="#fff" inactive-color="#fff" :list="tabs" :current="current" @change="tabsChange" :is-scroll="false"
                     swiperWidth="750"></u-tabs-swiper>
      <swiper :style="viewHeightStyle" :vertical="false" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item  :style="viewHeightStyle" v-for="(item, index) in tabsData" :key="index">
          <swiper :style="viewHeightStyle"  :vertical="true">
            <!-- 同城-->
            <swiper-item v-if="index == sameCity" >
              <!-- 如果没数据显示空 -->
              <u-empty :show="item.length == 0" text="所谓伊人，在水一方" mode="list"></u-empty>
              <scroll-view v-if="item.length > 0" scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottomSameCity">
                <template  v-for="($item, $index) in item">
                  <u-image width="100%" :height="$_screenHeight + 'px'" @error="logError({name: 'app首页用户主图',userId:$item.userId,userNickname: $item.nickname,requestUrl: $item.picUrl,remark: 'app首页用户主图加载失败'})"
                           :src="getPicUrl($item)"><u-loading slot="loading"></u-loading></u-image>

                  <!-- 用户信息-->
                  <view class="st-absolute st-bottom-0 st-color-white" style="padding-left: 20rpx;margin-bottom: 20rpx;width: 550rpx">
                    <view v-for="(item,index) in getDescription($item)" :key="index" :style="item.style" :class="item.class">{{item.str}}</view>
                  </view>
                  <!--头像信息-->
                  <u-avatar :src="$item.userAvatar" @tap="navigateToUserDetail($item.userId)"  class="st-absolute" style="position: absolute;right: 50rpx; bottom: 50rpx;" mode="circle" :show-sex="!!$item.genderDictValue" :sex-icon="gender[$item.genderDictValue]" ></u-avatar>

                </template>
              </scroll-view>
            </swiper-item>
            <!-- 邂逅-->
            <swiper-item v-else-if="index == xieHou" :style="viewHeightStyle" :vertical="true" v-for="($item, $index) in item" :key="$index">
              <u-image width="100%" :height="$_screenHeight + 'px'" @error="logError({name: 'app首页用户主图',userId:$item.userId,userNickname: $item.nickname,requestUrl: $item.picUrl,remark: 'app首页用户主图加载失败'})"
                       :src="getPicUrl($item)"><u-loading slot="loading"></u-loading></u-image>

              <!-- 用户信息-->
              <view class="st-absolute st-bottom-0 st-color-white" style="padding-left: 20rpx;margin-bottom: 20rpx;width: 550rpx">
                <view v-for="(item,index) in getDescription($item)" :key="index" :style="item.style" :class="item.class">{{item.str}}</view>
              </view>
              <!--头像信息-->
              <u-avatar :src="$item.userAvatar" @tap="navigateToUserDetail($item.userId)"  class="st-absolute" style="position: absolute;right: 50rpx; bottom: 50rpx;" mode="circle" :show-sex="!!$item.genderDictValue" :sex-icon="gender[$item.genderDictValue]" ></u-avatar>

            </swiper-item>
            <!-- 我-->
            <swiper-item v-else-if="index == me" >
            <!-- 没有登录显示空数据-->
              <u-empty :show="!vuex_hasLogin" text="需要登录哦" mode="list"></u-empty>
              <template  v-for="($item, $index) in item">
                <u-image width="100%" :height="$_screenHeight + 'px'" @error="logError({name: 'app首页用户主图',userId:$item.userId,userNickname: $item.nickname,requestUrl: $item.picUrl,remark: 'app首页用户主图加载失败'})"
                         :src="getPicUrl($item)"><u-loading slot="loading"></u-loading></u-image>

                <!-- 用户信息-->
                <view class="st-absolute st-bottom-0 st-color-white" style="padding-left: 20rpx;margin-bottom: 20rpx;width: 550rpx">
                  <view v-for="(item,index) in getDescription($item)" :key="index" :style="item.style" :class="item.class">{{item.str}}</view>
                </view>
                <!--头像信息-->
                <u-avatar :src="$item.userAvatar" @tap="navigateToUserDetail($item.userId)" class="st-absolute" style="position: absolute;right: 50rpx; bottom: 50rpx;" mode="circle" :show-sex="!!$item.genderDictValue" :sex-icon="gender[$item.genderDictValue]" ></u-avatar>

              </template>

            </swiper-item>

          </swiper>

        </swiper-item>
      </swiper>

    </view>
  </view>
</template>

<script>

const sameCity = 0
const xieHou = 1
const me = 2

export default {
  computed: {
    // 屏幕可视的高度
    viewHeightStyle(){
      return {height: this.$_screenHeight + 'px'}
    }
  },
  data() {
    return {
      // 给三方 tab 起个名字
      sameCity: sameCity,
      xieHou: xieHou,
      me: me,
      // tab 数据
      tabs: [{
        name: '同城'
      }, {
        name: '邂逅'
      }, {
        name: '我'
      },],

      // tab 加载的数据
      tabsData: [
          [],[],[]
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: xieHou, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: xieHou, // swiper组件的current值，表示当前那个swiper-item是活动的
    };
  },
  onShow(){
    if(!this.vuex_hasLogin){
      this.swiperCurrent = xieHou
    }
  },
  onReady(){
    // 加载邂逅数据
    this.loadXiehou()
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      // 点击了邂逅 tab
      if(this.swiperCurrent == xieHou && index == xieHou){
        // 重新点击刷新数据
        this.loadXiehou()
      }
      this.swiperCurrent = index;
    },
    // 未登录禁用左右滑动
    stopTouchMove(){
      return true
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view 到底部加载更多
    onreachBottomSameCity() {

    },
    // 加载邂逅数据
    loadXiehou() {
      uni.showLoading({
        title: '加载中'
      });
      this.$http.get('/user-info/recommend').then(res => {
        this.tabsData.splice(this.xieHou,1,res.data)
      }).finally(() => {
        uni.hideLoading();
      })
    },
    loadSameCity(){
      uni.showLoading({
        title: '加载中'
      });
      this.$http.get('/user-info/getPageBySameCity').then(res => {
        this.tabsData.splice(this.sameCity,1,res.data)
      }).catch(error =>{
        this.$u.toast(error.data.errorMsg)
      }).finally(() => {
        uni.hideLoading();
      })
    },
    loadMe(){
      uni.showLoading({
        title: '加载中'
      });
      this.$http.get('/user-info/' + this.vuex_userInfo.id + '/detail').then(res => {
        this.tabsData.splice(this.me,1,[res.data])
      }).catch(error =>{
        this.$u.toast(error.data.errorMsg)
      }).finally(() => {
        uni.hideLoading();
      })
    },
    // 获取信息
    getDescription(item){
      let r = []
      // 昵称
      r.push({
        style: 'font-weight: bold;font-size:20px',
        class: '',
        str: item.name
      })
      // 现居
      r.push({
        style: '',
        class: '',
        str: item.nowAreaName
      })
      // 家在
      r.push({
        style: '',
        class: '',
        str: item.homeAreaName
      })
      // 生日 身高 体重
      let str = []
      if(item.birthDay){
        str.push(this.$u.timeFormat(new Date(item.birthDay), 'yyyy年'))
      }
      if(item.height){
        str.push(item.height + 'cm')
      }
      if(item.weight){
        str.push(item.weight + 'kg')
      }
      r.push({
        style: '',
        class: '',
        str: str.join(' • ')
      })
      // 教育 专业
      str = []
      if(item.educationDictName){
        str.push(item.educationDictName)
      }
      if(item.profession){
        str.push(item.profession)
      }
      r.push({
        style: 'font-weight: bold;',
        class: '',
        str: str.join(' • ')
      })

      // 个人描述
      r.push({
        style: '',
        class: '',
        str: item.description
      })
      return r
    },
    // 获取主图
    getPicUrl(item){
      if(item.picUrl){
        return item.picUrl
      }
      if(item.userAlbums && item.userAlbums.length > 0){
        return item.userAlbums[0].picUrl
      }
    },
    // 跳转到用户详情
    navigateToUserDetail(userId){
      uni.navigateTo({
        url: '/pages/index/userDetail?userId=' + userId
      })
    }
  },
  watch: {
    // 监视tab切换判断登录状态
    swiperCurrent (val){
      if(val == sameCity || val == me){
        this.checkLogin().then(()=>{
          if(val == sameCity){
            if(this.tabsData[val].length == 0){
              this.loadSameCity()
            }
          }else if(val == me){
            if(this.tabsData[val].length == 0){
              this.loadMe()
            }
          }

        })
      }
    }
  }
};
</script>

